<!doctype html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>{{ video.vod_name }} - 在线播放</title>
        <link rel="stylesheet" href="/static/style.css" />
        <!-- 引入 Video.js -->
        <link
            href="https://vjs.zencdn.net/8.10.0/video-js.css"
            rel="stylesheet"
        />
        <script src="https://vjs.zencdn.net/8.10.0/video.min.js"></script>

        <!-- 引入 videojs-hotkeys 插件 -->
        <script src="https://cdn.jsdelivr.net/npm/videojs-hotkeys@latest/dist/videojs.hotkeys.min.js"></script>
        <!-- 添加 Font Awesome -->
        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
        />
    </head>
    <body>
        <div class="container">
            <header>
                <h1>{{ video.vod_name }}</h1>
                <p class="subtitle">{{ video.vod_sub }}</p>
            </header>

            <div class="video-info">
                <div class="poster">
                    <img
                        src="{{ video.vod_pic }}"
                        alt="{{ video.vod_name }}"
                        onerror="this.src='/static/images/default-poster.jpg'"
                    />
                </div>
                <div class="details">
                    <p><strong>类型:</strong> {{ video.type_name }}</p>
                    <p><strong>地区:</strong> {{ video.vod_area }}</p>
                    <p><strong>年份:</strong> {{ video.vod_year }}</p>
                    <p><strong>状态:</strong> {{ video.vod_remarks }}</p>
                </div>
            </div>

            <div class="player-section">
                <h2>播放器</h2>
                <div class="video-container">
                    <video
                        id="my-video"
                        class="video-js vjs-default-skin"
                        controls
                        preload="auto"
                        width="100%"
                        height="400"
                        poster="{{ video.vod_pic }}"
                    >
                        <p class="vjs-no-js">
                            您的浏览器不支持HTML5视频，请使用现代浏览器观看。
                        </p>
                    </video>
                </div>
            </div>

            <div class="episodes">
                <h2>剧集列表</h2>
                <div class="episode-grid">
                    {% for (name, url) in play_urls %}
                    <button
                        class="episode-btn"
                        data-url="{{ url }}"
                        onclick="playEpisode('{{ name }}', '{{ url }}', event)"
                    >
                        {{ name }}
                    </button>
                    {% endfor %}
                </div>
            </div>
        </div>

        <!-- 确保脚本按正确顺序加载 -->
        <script src="https://vjs.zencdn.net/8.10.0/video.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/hls.js@1.4.10/dist/hls.min.js"></script>
        <script>
            // 检查库是否加载成功
            if (typeof videojs === "undefined") {
                console.error("Video.js 加载失败");
            }
            if (typeof Hls === "undefined") {
                console.error("Hls.js 加载失败");
            }
        </script>
        <script src="/static/player.js"></script>
    </body>
</html>
